<template>
  <div id="baidu-map" ref="mapContainer"></div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import { defineProps } from "vue";

// 定义外部传入的 props
const props = defineProps<{
  searchKeyword: string; // 搜索关键字
}>();

// 百度地图相关配置
const mapContainer = ref<HTMLElement | null>(null); // 地图容器
const centerPoint = { lng: 113.2644, lat: 23.1291 }; // 地图中心点坐标
const zoomLevel = 11; // 地图缩放级别

let map: BMapGL.Map | null = null; // 地图实例
let localSearch: BMapGL.LocalSearch | null = null; // 本地搜索实例

const initializeMap = () => {
  if (mapContainer.value) {
    // 创建地图实例
    map = new BMapGL.Map(mapContainer.value);
    const center = new BMapGL.Point(centerPoint.lng, centerPoint.lat);
    map.centerAndZoom(center, zoomLevel);
    map.enableScrollWheelZoom(true);

    // 添加搜索功能
    localSearch = new BMapGL.LocalSearch(map, {
      renderOptions: { map: map }, // 搜索结果渲染到地图上
    });
  }
};

onMounted(() => {
  initializeMap();
  // 执行初始搜索
  if (localSearch && props.searchKeyword) {
    localSearch.search(props.searchKeyword);
  }
});

// 监听 `searchKeyword` 的变化
watch(
  () => props.searchKeyword,
  (newKeyword) => {
    if (localSearch && newKeyword) {
      // 执行新的搜索
      localSearch.search(newKeyword);
    }
  },
  { immediate: true }, // 立即执行一次，确保初次加载时也能执行
);
</script>

<style scoped>
#baidu-map {
  width: 100%;
  height: 100%;
}
</style>
